//首页

require(['./config'], () => {//引入路径文件,有两个参数,第一个参数是个数组(因为这个是最外层的用于引入路径,所以这里的参数是路径文件confog.js的路径注意这里页不需要加后缀),第二个是个函数,所有参数都在这个里边完成
  require(['swiper', 'template', 'header', 'footer'], (Swiper, template , Header) => {//第二层的require引入的是路径文件中,参数1 ： 定义的key:value 中的key(注意若是这个key所代表的那个js模块文件返回的不是new实例化后的值,则需要在第二个参数(函数)中接收一下),参数2 ：函数,可以接收形参(这个参数主要是用来接收返回来的没有new过的的参数(名字自己起的)) 
    class Index {//模块化用class构造函数的方法定义一个类,名为Insex
      constructor() {//calss的constructor函数这就是构造函数
        this.init();//this关键字则代表实例对象。只要定义了一个方法上边就得this一下
        this.header();
        this.banner();
        this.SeckillProducts();//假数据端口
        this.OneLineShree();
        this.OneLineFore_01();
        this.OneLineFore_02();
        this.CountDown();
      }
      //端口代理
      init () {//init方法,用来访问后端
        // $.get('http://localhost:80/api/login.php')
        /*
        $.get('/api/index.php', resp => {
          console.log(resp)
        })//绝对路径写成这样就行了,JQ的AJAX,get方法,两个参数,一个是路径,一个回调函数用来接收传回来的值
        */
      }
      //头部代码
      header () {//这样是在.js中没有返回值的时候的方法,用这种方法来在总js中再实列化
        new Header()
      }
      //轮播图
      banner () {
        new Swiper('.lunbo', {
          // direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          speed: 1200,
          autoplay: {//时间
            delay: 2000,
          },
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }
        })
      }
      //秒杀商品链接假数据端口
      SeckillProducts(){
        $.get('http://rap2api.taobao.org/app/mock/244799/index', resp => {
          console.log(resp)
          if (resp.code === 200) {
            // es6解构赋值
            const { SeckillProducts } = resp.body
            /*等同于
            const SeckillProducts = resp.body.SeckillProducts
            */
           
            // 如果模板里的字段名和这里传递的数据变量名写法一样就可以解构赋值只写一次
            const html = template('Template_01', { SeckillProducts : SeckillProducts})
            $('#SeckillProducts').html(html)
          }
        })
      }
      //本地json文件
      //推荐商品中一行三的模块
      /*
      OneLineShree () {
        //JQ的ajax获取本地json文件
        $.get('/libs/json/OneLineShree.json', resp => {
          console.log(resp)
          // 根据list数据渲染模板
          // template方法有两个参数
          //  第一个参数是定义模板的script标签的id，注意：不加#
          //  第二个参数是模板里所需要的数据，传一个对象： 模板里面需要list，传从后端拿到的resp进去
          // template方法的返回值就是根据模板渲染的html字符串结果
          const str = template('Template_02', { OneLineShree : resp })
          console.log(str)
          // 把渲染完成的html字符串放到容器盒子里
          $('#OneLineShree').html(str)
        })
      }
      */
     //推荐中一行三
      OneLineShree() {
        $.get('http://rap2api.taobao.org/app/mock/244799/index', resp => {
          console.log(resp)
          if (resp.code === 200) {
            const { OneLineShree } = resp.body.commodity
            const html = template('Template_02', { OneLineShree: OneLineShree })
            $('#OneLineShree').html(html)
          }
        })
      }
      //推荐中一行四01
      OneLineFore_01() {
        $.get('http://rap2api.taobao.org/app/mock/244799/index', resp => {
          console.log(resp)
          if (resp.code === 200) {
            const { OneLineFore_01 } = resp.body.commodity
            const html = template('Template_03', { OneLineFore_01 : OneLineFore_01 })
            $('#OneLineFore_01').html(html)
          }
        })
      }
      //推荐中一行四02
      OneLineFore_02() {
        $.get('http://rap2api.taobao.org/app/mock/244799/index', resp => {
          console.log(resp)
          if (resp.code === 200) {
            const { OneLineFore_02 } = resp.body.commodity
            const html = template('Template_04', { OneLineFore_02: OneLineFore_02 })
            $('#OneLineFore_02').html(html)
          }
        })
      }
      //实现首页倒计时功能
      CountDown(){
        let oH = $('#H').html();
        let oM = $('#M').html();
        let oS = $('#S').html();//获取页面元素中的值
        //判断位数,小于两位则前边加一个0
        if(oH.length < 2){
          oH = '0' + oH;
          $('#H').html(oH);
        }
        if(oM.length < 2){
          oM = '0' + oM;
          $('#M').html(oM)
        }
        if(oS.length < 2){
          oS = '0' + oS;
          $('#M').html(oS)
        }
        let timer = setInterval(function () {
          if (oH == 0 && oM == 0 && oS == 0) {
            // alert('倒计时结束');
            clearInterval(timer);
          } else {
            if (oS > 0) {//如果秒数没有减到0的时候,每1000毫秒减1
              oS--;
            } else if (oS == 0) {//当秒数递减到0的时候,首先先把秒数重新赋值为59,然后再判断分钟数,若大于0的话进入if语句进行执行
              oS = 59;
              if (oM > 0) {//然后判断分钟数是否大于0,如果大于0的话,则分钟减1
                oM--;
              } else if (oM == 0) {//如果秒数等于0且分钟也等于0了或者是分钟也递减到0了的时候,给分钟重新赋值59
                oM = 59;//注意此处和上边oS = 59是不会存在当时分秒为 0 0 0 的时候又给重新赋值为59的情况,因为当最后的一次出现 0 0 0 的情况是在oS大于0的情况下减为的0,所以就不会进入oS == 0的else语句,直接下一步就是判断 0 0 0 的if语句了,然后就是弹出了 结束 并清除计时器,这里我的一个疑惑点,不过在控制台中一步一步的执行完 1 0 0 和 0 0 1 之后就能清楚明白一切原因了
                if (oH > 0) {//
                  oH--;
                }
              }
            }
          }
          //1000毫秒走完一次计时器后,把页面span框中的内容重新填写一次
          //判断若是位数小于二位时在前边加个0
          if(oH.toString().length < 2){
            oH = '0' + oH;
            // $('#H').html(oH);
          }
          if(oM.toString().length < 2){
            oM = '0' + oM;
            // $('#M').html(oM);
          }
          if(oS.toString().length < 2){
            oS = '0' + oS;
            // $('#M').html(oS);
          }
          $('#H').html(oH);
          $('#M').html(oM);
          $('#S').html(oS);
        }, 1000)

      }
    }
    new Index()
  })
})
